<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【题型】：
          {{
            formDate.questionType === "1"
              ? "单选"
              : formDate.questionType === "2"
              ? "多选"
              : formDate.questionType === "3"
              ? "简答"
              : ""
          }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【编号】：{{ formDate.id }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【难度】：
          {{
            formDate.difficulty === "1"
              ? "简单"
              : formDate.difficulty === "2"
              ? "一般"
              : formDate.difficulty === "3"
              ? "困难"
              : ""
          }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【标签】：{{ formDate.tags }}
        </div></el-col
      >
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【学科】：{{ formDate.subjectName }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【目录】：{{ formDate.directoryName }}
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          【方向】：{{ formDate.direction }}
        </div></el-col
      >
    </el-row>
    <el-divider></el-divider>

    <el-row :gutter="20">
      <el-col :span="20"
        ><div class="grid-content bg-purple">
          【题干】：
          <p style="color: blue">{{ formDate.question }}</p>
          <p>选项：(以下选中的选项为正确答案)</p>
        </div>

        <!-- 单选多选选框  v-if 判断如果 questionType 类型如果不是单选或者多选就隐藏 显示简答-->
        <div
          v-if="formDate.questionType === '1' || formDate.questionType === '2'"
        >
          <el-radio
            v-model="isRight"
            style="display: block"
            class="radio"
            v-for="item in formDate.options"
            :key="item.id"
            :label="item.isRight"
          >
            {{ item.title }}
          </el-radio>
        </div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="20"
        ><div class="grid-content bg-purple">
          【参考答案】：
          <el-button type="danger" @click="video = true"
            >视频答案预览
          </el-button>
          <!-- 视频播放 -->
          <div v-if="video">
            <video
              id="video"
              controls
              width="800"
              height="480"
              autoplay="autoplay"
            >
              <source :src="formDate.videoURL" type="video/mp4" />
            </video>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="20"
        ><div class="grid-content bg-purple">
          【答案解析】：{{ formDate.remarks }}
        </div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="20"
        ><div class="grid-content bg-purple">
          【题目备注】：{{ formDate.remarks }}
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'QuestionsPreview',
  props: {
    topicId: {
      type: Number,
      required: true
    }
  },

  data () {
    return {
      isNext: Boolean, // 传的参
      formDate: {}, // 题组详情
      video: false, // 控制视频的显示与隐藏
      isRight: 1 // 是否是正确的答案
    }
  },

  created () {
    // 调用获取基础题库详情的方法
    this.detail()
  },

  methods: {
    // 获取基础题库详情
    detail () {
      detail({ id: this.topicId }).then(res => {
        this.formDate = res.data
      }).catch(err => err)
    }
  }
}
</script>

<style scoped lang='scss'>
label.el-radio.radio {
  margin-bottom: 15px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 5px 0;
  background-color: #f9fafc;
}
.el-divider.el-divider--horizontal {
  margin: 15px 0;
}
</style>
